<template>
  <div>
    <el-dialog
      title="发送邮件"
      :visible.sync="centerDialogVisible"
      @open="onOpen"
      @close="onClose"
      width="60%"
      center
    >
      <el-row :gutter="0">
        <el-form
          ref="packet"
          :model="packetData"
          :rules="rules"
          size="mini"
          label-width="120px"
          label-position="left"
        >
          <el-col :span="24">
            <el-form-item label="邮件主题" prop="subject">
              <el-input
                v-model="packetData.subject"
                placeholder="请输入单行文本邮件主题"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发件人" prop="sendIno">
              <el-select
                v-model="packetData.sendIno"
                placeholder="请选择发件人"
                filterable
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in userOptions"
                  :key="v"
                  :label="userOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收件人" prop="receiveIno">
              <el-input
                v-model="packetData.receiveIno"
                placeholder="多个收件人用(,)或者(;)隔开"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抄送" prop="ccAddress">
              <el-input
                v-model="packetData.ccAddress"
                placeholder="多个抄送人用(,)或者(;)隔开"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="contentFile">
              <el-button type="text" @click="uploadcontentFile"
                >点击上传</el-button
              >
              <div v-for="(item, k) in packetData.contentFile" :key="k">
                <span
                  >{{ item }}
                  <el-button
                    type="text"
                    style="color:red;"
                    @click="deleteContentFile(k)"
                    >删除</el-button
                  >
                </span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮件内容" prop="content">
              <tinymce
                v-model="packetData.content"
                placeholder=""
                :height="300"
              ></tinymce>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="sendEmail">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="上传文件"
      :visible.sync="uploadFileDiaLog"
      width="50%"
      center
    >
      <el-card>
        <el-upload
          class="upload-demo"
          ref="upload"
          drag
          action="fakeaction"
          :show-file-list="true"
          :http-request="uploadFn"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :auto-upload="true"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";
import * as constant from "@/store/yg/common/constant";
const Tinymce = () => import("@/components/app/components/Tinymce");
import { m } from "@/store/yg/common/local";
export default {
  inheritAttrs: false,
  components: {
    Tinymce
  },
  props: {
    userOptions: {
      type: Object,
      default: function() {
        return {};
      }
    },
    data: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      uploadFileDiaLog: false,
      packetData: {
        subject: "",
        sendIno: "",
        receiveIno: "",
        ccAddress: "",
        contentFile: [],
        tmpAddAccessorys: [],
        content: ""
      },
      fileList: [],
      action: "",
      feeData: [],
      rules: {
        subject: [
          {
            required: true,
            message: "请输入单行文本邮件主题",
            trigger: "blur"
          }
        ],
        sendIno: [
          {
            required: true,
            message: "请选择发件人",
            trigger: "change"
          }
        ],
        receiveIno: [
          {
            required: true,
            message: "多个收件人用(,)或者(;)隔开",
            trigger: "blur"
          }
        ],

        content: [
          {
            required: true,
            message:
              "Dear Team  Pre-alert docs have stock in system ,pls click http://www.tofba.com:8084 for checking .    Best Regard.  admin 测试 深圳市九方通逊电商物流有限公司 13266829617",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created: function() {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=/waybill/batchuploadfile/main&f=uploadAccessorys&type=blank";
  },
  mounted() {},
  methods: {
    uploadcontentFile() {
      this.uploadFileDiaLog = true;
    },
    onOpen() {},
    onClose() {
      this.$refs["packet"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    sendEmail() {
      console.log(this.packetData);
      this.packetData.tmpAddAccessorys = this.packetData.contentFile;
      this.$refs["packet"].validate(valid => {
        if (!valid) return;
        this.fullscreenLoading = true;
        ajax("sendEmail", this.packetData).then(
          res => {
            this.fullscreenLoading = false;
            if (res.code == 200) {
              this.$message.success("发送成功!");
            } else {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("发送失败!");
              }
            }
          },
          error => {
            console.log(error);
          }
        );
        this.close();
      });
    },

    deleteContentFile(index) {
      this.packetData.contentFile.splice(index, 1);
    },

    uploadFn(params) {
      this.fullscreenLoading = true;
      //自定义上传文件
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("pdf") !== -1,
        isLt4M = file.size / 1024 / 1024 < 4;
      this.packetData.contentFile.push(file.name);
      const form = new FormData();
      // 文件对象
      form.append("items[]", file);

      axios({
        method: "post",
        url: this.action,
        data: form
      })
        .then(response => {
          this.fullscreenLoading = false;

          if (response.data.code === 200) {
            this.$message.success("附件已上传成功! ");
            response.data.data.forEach(element => {
              this.packetData.tmpAddAccessorys.push(element);
              console.log("this.packetData.tmpAddAccessorys",this.packetData.tmpAddAccessorys);
            });
          } else {
            let msg = response.data.message ? response.data.message : '可能没配置权限【运单 -> 批量导入文件】';
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + msg
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
<style></style>
